<template>
  <div class="box">

    <p class="order">
      <span class="qes">提现金额</span>
      <input class="a" placeholder="请输入提现金额" type="number" v-model="money" />
    </p>

    <div class="order" >
      <span class="qes">开户行</span>
      <!-- <div @click="showSelect" class="a"> -->
        <span v-if="cards" style="color : #0084ff" class="a">{{cards.card_address}}</span>
        <input v-else placeholder="请填写开户行" v-model="cityEx" class="a" />
      <!-- </div> -->
    </div> 

    <div class="order">
      <span class="qes">身份证号码</span>
      <span v-if="cards" style="color : #0084ff" class="a">{{cards.id_card}}</span>
      <input v-else type="text" class="a" placeholder="请输入您的身份证号码" v-model="id_card">
    </div>

    <div class="order">
      <span class="qes">持卡人</span>
      <span v-if="cards" style="color : #0084ff" class="a">{{cards.name}}</span>
      <input v-else type="text" class="a" placeholder="请输入您的姓名" v-model="name">
    </div>

    <div class="order">
      <span class="qes">银行卡号</span>
      <span v-if="cards" style="color : #0084ff" class="a">{{cards.card_number}}</span>
      <input v-else type="text" class="a" placeholder="请输入您的银行卡号" v-model="card_number">
    </div>

    <div class="order">
      <span class="qes">已验证手机</span>
      <!-- <input type="number" class="a">  -->
      <span style="color : #0084ff" class="a">{{message.phone}}</span>
    </div>

    <div class="order">
      <span class="qes">验证码</span>
      <input type="text" placeholder="请在输入验证码" class="a" v-model="verificationCode">
      <span style="color : #0084ff;cursor:pointer;" class="send" @click="sendCode()">{{content}}</span>
    </div>

    <div @click="charge()" class="submit">
      立即提现
    </div>
  </div>
</template>

<script>
import Axios from "../../common/js/Axios";
export default {
  data() {
    return {
      //接口数据
      message: {},
      //默认选择城市
      cityEx : "",
      // 判断是否显示
      //   payShow : false,
      //判断6位密码
      //   clickOnOff: true,
      //需要充值的金额
      money: "",
      //密码组
      //   passwordGroup: ["", "", "", "", "", ""],
      //键盘
      //   number: [
      //     "0",
      //     "1",
      //     "2",
      //     "3",
      //     "4",
      //     "5",
      //     "6",
      //     "7",
      //     "8",
      //     "&#xe621;",
      //     "9",
      //     "确定"
      //   ],
      //每次点击后更新索引
      //   clickIndex: 0,
      // payIndex: 0,
      // payChoice: [
      //   {
      //     title: "银直联快捷提现",
      //     img: "../../../static/images/me/pay_img.jpg",
      //     choiceOk: "&#xe62b;"
      //   },
      //   {
      //     title: "快捷提现",
      //     img: "../../../static/images/me/pay_img.jpg",
      //     choiceOk: "&#xe60f;"
      //   }
      // ],
      name: "",
      id_card: "",
      card_number: "",
      verificationKey: "",
      verificationCode: "",
      content: "获取验证码",
      totalTime: 60,
      timer: null,
      cards: null
    };
  },
  components: {
  },
  mounted() {
    this.getAgree();
    this.getCard();
  },
  methods: {
    getCard() {
      let userToken = localStorage.getItem("Authorization");
      Axios.getAxios(
        "/api/cards",
        {},
        {
          Authorization: "Bearer " + userToken
        }
      ).then(
        res => {
          if (res.data.status) {
            this.cards = res.data.data;
          } else {
            this.cards = null;
          }
        },
        err => {
           this.$message("请检查网络或登录状态");
        }
      );
    },
    sendCode() {
      if (this.timer) return;
      this.countDown();
      let userToken = localStorage.getItem("Authorization");
      Axios.getAxios(
        "/api/tixianCode",
        {},
        {
          Authorization: "Bearer " + userToken
        }
      ).then(
        res => {
          if (res.data.status) {
            this.verificationKey = res.data.data.verificationKey;
          }
        },
        err => {
           this.$message("请检查网络或登录状态");
        }
      );
    },
    getAgree() {
      let userToken = localStorage.getItem("Authorization");
      Axios.getAxios(
        "/api/user",
        {},
        {
          Authorization: "Bearer " + userToken
        }
      ).then(
        res => {
          console.log(res);
          res.data.data.phone = res.data.data.phone.replace(
            /(\d{3})\d{4}(\d{4})/,
            "$1****$2"
          );
          this.message = res.data.data;
          console.log(res.data.data.image);
        },
        err => {
           this.$message("请检查网络或登录状态");
        }
      );
    },
    //地址显示控件点击后触发事件
    showSelect: function() {
      //自己实现的根据地址名称获取id，代码如下
      var levels = this.textToLevel(this.cityEx);
      var iosSelect = new IosSelect(3, [iosProvinces, iosCitys, iosCountys], {
        title: "地址选择",
        itemHeight: 35,
        relation: [1, 1], //三个初始值，省市县
        oneLevelId: levels[0],
        twoLevelId: levels[1],
        threeLevelId: levels[2], //地址选择点击确定后的回调
        callback: (selectOneObj, selectTwoObj, selectThreeObj) => {
          this.cityEx = selectOneObj.value + " " + selectTwoObj.value;
          console.log(this.cityEx);
        }
      });
    },
    //根据地址名字转化未三级level，用以给iosSelect设置初始值
    textToLevel: function(text) {
      var arr = [];
      if (text) {
        var objs = text.split(" ");

        if (objs[0]) {
          iosProvinces.forEach((item, index) => {
            if (item.value == objs[0]) {
              arr.push(item.id);
            }
          });
        }

        if (objs[1]) {
          iosCitys.forEach((item, index) => {
            if (item.value == objs[1]) {
              arr.push(item.id);
            }
          });
        }

        if (objs[2]) {
          iosCountys.forEach((item, index) => {
            if (item.value == objs[2]) {
              arr.push(item.id);
            }
          });
        }
      }

      return arr;
    },
    // select(index) {
    //   //去除其他选中状态
    //   this.payChoice.forEach(item => {
    //     item.choiceOk = "&#xe60f;";
    //   });
    //   this.payChoice[index].choiceOk = "&#xe62b;";
    //   this.payIndex = index;
    // },
    charge() {
      let userToken = localStorage.getItem("Authorization");
      let { ...postContent } = this.cards
        ? {
            money: this.money,
            id: this.cards.id,
            verificationKey: this.verificationKey,
            verificationCode: this.verificationCode
          }
        : {
            money: this.money,
            id_card: this.id_card,
            card_address: this.card_address,
            name: this.name,
            card_number: this.card_number,
            verificationKey: this.verificationKey,
            verificationCode: this.verificationCode,
            card_address:this.cityEx
          };
      // let { ...postContent } = {
      //       money: this.money,
      //       id_card: this.id_card,
      //       card_address: this.card_address,
      //       name: this.name,
      //       card_number: this.card_number,
      //       verificationKey: this.verificationKey,
      //       verificationCode: this.verificationCode,
      //       card_address:this.cityEx
      //     };

      Axios.postAxios(
        "/api/tixian",

        { ...postContent },
        {
          Authorization: "Bearer " + userToken
        }
      ).then(
        res => {
          if (res.data.status) {
            this.money = "";
             this.$message(res.data.msg);
          } else {
             this.$message(res.data.msg);
          }
        },
        err => {
           this.$message("请检查网络或登录状态");
        }
      );
    },
    inputPwd(value) {
      switch (value) {
        case "&#xe621;":
          //vue不能直接更改下标
          this.passwordGroup.splice(--this.clickIndex, 1, "");
          if (this.clickIndex < 0) {
            this.clickIndex = 0;
          }
          if (this.clickIndex < 6 && this.clickIndex > 0) {
            this.clickOnOff = true;
          }
          break;
        case "确定":
          break;
        default:
          if (this.clickOnOff) {
            this.passwordGroup.splice(this.clickIndex++, 1, value);
            if (this.clickIndex == 6) {
              this.clickOnOff = false;
            }
          } else {
             this.$message("请输入6位以内密码");
          }
          break;
      }
      console.log(this.clickIndex);
    },
    countDown() {
      if (!this.timer) {
        this.timer = setInterval(() => {
          if (this.totalTime > 0) {
            this.content = this.totalTime + "s后重新发送";
            this.totalTime--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.content = "发送验证码";
            this.totalTime = 60;
          }
        }, 1000);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
h2 {
  font-size: 18px;
  font-weight: 800;
  color: #c5965a;
  margin: 10px auto;
}

h1 {
  font-weight: bold;
  font-size: 40px;
  color: red;
}

.title {
  color: #c5965a;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 5px;
  padding-left: 10px;
  margin: 0 10px;
  line-height: 40px;

  i {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #a77335;
    border-radius: 100%;
    margin-right: 15px;
  }
}

.title {
  color: #a77335;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 5px;
  padding-left: 10px;
  margin: 0 10px;
  line-height: 40px;

  i {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #a77335;
    border-radius: 100%;
    margin-right: 15px;
  }
}

.box {
  width: 400px;
  margin: auto;
  margin-top: 50px;

  .order {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 40px;

    .qes, .a {
      flex: 1;
      font-size: 14px;
      color: #000;

      .ui-input {
        border: 1px solid #C5C5C5;
        padding: 2px 5px;
        width: 155px;
        font-size: 14px;
        line-height: 28px;
        height: 28px;
        border-radius: 2px;
        min-width: 50px;
        border-radius: 2px;
        padding: 0 0 0 15px;
        border: 1px solid #C5C5C5;
        resize: none;
        vertical-align: middle;
      }
    }

    .a {
      flex: 3;

      span {
        font-weight: 700;
        color: #FF6600;
      }
    }
  }

  .submit {
    display: block;
    width: 295px;
    height: 35px;
    text-align: center;
    color: #fff;
    border: none;
    background-color: red;
    border-radius: 4px;
    font-size: 14px;
    line-height: 35px;
    margin-top: 30px;
    font-weight: 400;
  }
}
</style>


